<template>

  <el-card class="box-card">
    <el-form ref="form" v-loading="loading" :model="form" label-width="130px">
      <el-form-item label="密码设置">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-input v-model="form.passwordComplexity.requiredLength" size="mini" placeholder="长度">
              <template slot="prepend">密码最小长度</template>
            </el-input>
            <el-input v-model="form.passwordComplexity.requiredUniqueChars" size="mini" placeholder="长度">
              <template slot="prepend">唯一字符最小数量</template>
            </el-input>
            <el-checkbox v-model="form.passwordComplexity.requireDigit">包含数字</el-checkbox>
            <el-checkbox v-model="form.passwordComplexity.requireUppercase">包含大写字母</el-checkbox>
            <el-checkbox v-model="form.passwordComplexity.requireLowercase">包含小写字母</el-checkbox>
            <el-checkbox v-model="form.passwordComplexity.requireNonAlphanumeric">包含符号</el-checkbox>
          </el-col>
        </el-row>
      </el-form-item>
      <el-divider />
      <el-form-item label="锁定设置">
        <el-row>
          <el-col :span="20">
            <el-switch v-model="form.userLockOut.allowedForNewUsers" active-text="允许对新用户" />
          </el-col>
          <el-col :span="13">
            <el-input v-model="form.userLockOut.lockoutDuration" size="mini" placeholder="填写秒数">
              <template slot="prepend">锁定时间</template>
              <template slot="append">秒</template>
            </el-input>
          </el-col>
          <el-col :span="13">
            <el-input v-model="form.userLockOut.maxFailedAccessAttempts" size="mini" placeholder="填写次数">
              <template slot="prepend">连续登录失败</template>
              <template slot="append">次锁定</template>
            </el-input>
            <el-alert class="dis" title="锁定后在规定时间内不允许登录" type="warning" :closable="false" />
          </el-col>
        </el-row>
      </el-form-item>
      <el-divider />
      <el-form-item label="登录设置">
        <el-switch v-model="form.signIn.requireConfirmedEmail" active-text="要求确认邮箱地址" /><br>
        <el-switch v-model="form.signIn.enablePhoneNumberConfirmation" active-text="启用电话号码确认" /><br>
        <el-switch v-model="form.signIn.requireConfirmedPhoneNumber" active-text="要求确认手机号码" />
      </el-form-item>
      <el-divider />
      <el-form-item label="用户设置">
        <el-switch v-model="form.user.isUserNameUpdateEnabled" active-text="启用用户名更新" /><br>
        <el-switch v-model="form.user.isEmailUpdateEnabled" active-text="启用邮箱地址更新" />
      </el-form-item>
      <el-divider />
      <el-form-item>
        <el-button type="primary" :loading="isSubmitLoading" @click="save">保存</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { getSettings, updateSettings } from "@/api/settings/identity";

export default {
  name: 'IdentitySettings',
  data() {
    return {
      loading: true,
      isSubmitLoading: false,
      form: {
        passwordComplexity: {
          requiredLength: 6,
          requireDigit: true,
          requireUppercase: true,
          requireLowercase: true,
          requireNonAlphanumeric: true,
          requiredUniqueChars: 1
        },
        userLockOut: {
          allowedForNewUsers: true,
          lockoutDuration: 300,
          maxFailedAccessAttempts: 5
        },
        signIn: {
          requireConfirmedEmail: false,
          enablePhoneNumberConfirmation: true,
          requireConfirmedPhoneNumber: false
        },
        user: {
          enableLocalLogin: false,
          isSelfRegistrationEnabled: false
        }

      }
    };
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      getSettings().then(result => {
        this.form = result;

        this.loading = false;
        this.$nextTick(() => {
          this.$refs["form"].clearValidate();
        });
      });
    },
    save() {
      console.log(this.form);

      this.isSubmitLoading = true;
      this.$refs["form"].validate(valid => {
        if (!valid) {
          this.isSubmitLoading = false;
          this.$message({ message: this.$t("formIsNotValidMessage"), type: "warning" });
          return;
        }

        updateSettings(this.form)
          .then(() => {
            this.$message({ message: "保存成功", type: "success" });
            this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
          })
          .finally(() => {
            this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
          });
      });
    }
  }
};
</script>
<style scoped>
.el-checkbox {
  display: block;
}
</style>
